<div class="waper">
  <div>
    <form #f="ngForm" style="width:300px;">
      <h2>form表单</h2>
      <div class="form-group">
        <label>名字</label>
        <input type="text" readonly class="form-control" placeholder="readonly" name="name" [(ngModel)]="users.name">
      </div>
      <div class="form-group">
        <label>年龄</label>
        <input type="number" class="form-control" name="age" [(ngModel)]="users.age">
      </div>
      <div class="form-group">
        <label>性别</label>
        <label *ngFor="let gender of genders;">
          <input type="radio" name="gender" [(ngModel)]="users.gender" [value]="gender.value"> {{gender.display}}
        </label>
      </div>
      <div class="form-group">
        <label>角色</label>
        <select name="role" class="form-control" [(ngModel)]="users.role">
          <option *ngFor="let role of roles" [value]="role.value">
            {{role.display}}</option>
        </select>
      </div>
      <div class="form-group">
        <label>主题</label>
        <select name="theme" class="form-control" [(ngModel)]="users.theme">
          <option *ngFor="let theme of themes" [value]="theme">
            {{theme.display}}
          </option>
        </select>
      </div>
      <div class="form-group">
        <div class="checkbox">
          <label>
            <input type="checkbox" name="isActive" [(ngModel)]="users.isActive"> 是否激活
          </label>
        </div>
      </div>
      <div class="form-group">
        <label>话题</label>
        <select [multiple]="ismultiple" name="topics" class="form-control" [(ngModel)]="users.topics">
          <option *ngFor="let topic of topics" [value]="topic.value">
            {{topic.display}}
          </option>
        </select>
        <button (click)="ismultiple=!ismultiple">变成多选</button>
      </div>
      <div class="form-group">
        <span>爱好</span>
        <label *ngFor="let hobby of hobbies">
          <input type="checkbox" name="bobby" [value]="hobby.value" [checked]="users.hobbies[hobby.value]" (change)="changeHobby(hobby, $event)"
          /> {{hobby.display}}
        </label>
      </div>
      <div class="form-group">
        <label>地址</label>
        <select name="province" class="form-control" [(ngModel)]="users.province" (change)="changeProvince($event.target.value)">
          <option *ngFor="let province of provinces" [value]="province.pk">
            {{province.pv}}
          </option>
        </select>
        <select name="city" class="form-control" [(ngModel)]="users.city">
          <option *ngFor="let city of cities" [value]="city.ck">{{city.cv}}</option>
        </select>
      </div>
      <button type="submit" (click)="save()" class="btn btn-default">保存</button>

    </form>
  </div>
  <div>
    <form (ngSubmit)="onSubmit(user)" [formGroup]="user">
      <h2>模板表单的验证</h2>
      <h5 style="margin:3px 0;">*ngIf name required</h5>
      <label>
        <span style="color:rgb(27, 49, 240);font-size:22px;">Observable name</span>
        <input type="text" placeholder="Your full name" formControlName="name">
        <br> {{user.get('name').value}}
      </label>
      <div class="error" *ngIf="user.get('name').hasError('required') && 
              user.get('name').touched">
        Name is required
      </div>
      <div class="error" *ngIf="user.get('name').hasError('minlength') && 
              user.get('name').touched">
        Minimum of 2 characters
      </div>
      <h2>formGroupName</h2>
      <div formGroupName="account">
        <span style="color:red;font-size:14px;">formGroupName="account"</span>
        <br>
        <label>
          <span>Email address</span>
          <input type="email" placeholder="Your email address" formControlName="email">
        </label>
        <div class="error" *ngIf="user.get('account').get('email').hasError('required') && 
               user.get('account').get('email').touched">
          Email is required
        </div>
        <div>
          <label>
            <span>Confirm address</span>
            <input type="email" placeholder="Confirm your email address" formControlName="confirm">
          </label>
          <div class="error" *ngIf="user.get('account').get('confirm').hasError('required') && 
               user.get('account').get('confirm').touched">
            Confirming email is required
          </div>
        </div>
      </div>
      <button type="submit" [disabled]="user.invalid">Sign up</button>
    </form>
  </div>



  <div>
    <h2>trackBy</h2>
    <p *ngFor="let hero of heroesData; trackBy: trackByHeroes">{{hero.name}}</p>
    <button (click)="makeChage()">trackBy</button>
  </div>
  <div>
    <h2>ngSwitch ngClass</h2>
    <div [ngSwitch]="myVar" [ngClass]="{'aaa':myVar=='A','bbb':myVar=='B','ccc':myVar=='C'}">
      <div *ngSwitchCase="'A'">Var is A</div>
      <div *ngSwitchCase="'B'">Var is B</div>
      <div *ngSwitchCase="'C'">Var is C</div>
      <div *ngSwitchDefault>Var is else</div>
    </div>
    <button (click)="makeChage2()">makeChage2</button>
  </div>
  <div>
    <h2 #isH2>@ViewChild</h2>
    <p #isP id="isP">isPisPisPisP</p>
    <button (click)="makeChage4()">click</button>
    <h2>window:scroll </h2>
    <p #isScroll style="background:red;font-size:20px;padding:10px;">在窗口内滚动鼠标滚轮</p>
  </div>
  <div>
    <h2>async 同步执行for循环</h2>

    <p *ngFor="let asyncdata of asyncData">{{asyncdata}}</p>
    <button (click)="anss()">anss</button>
  </div>
  <div>
    <h2> 监听滚动条的位置scrollTop值 </h2>
    <span>{{scrollDatas}}</span>
    <div class="wapperDiv" (scroll)="onscroll($event)" (click)="onscroll($event)">
      <div>
        <p *ngFor="let i of [1,2,3,4,5,6,7,8]">{{i}}：这个div可以滚动</p>
      </div>
    </div>
  </div>
</div>
<div class="waper">
  <div>
    <form [formGroup]="funValid">
      <h2>使用带参数验证函数</h2>
      <input type="text" placeholder="ages" formControlName="ages">
      <br>
      <input type="text" placeholder="go" formControlName="go">
    </form>
    <p>
      funValid.errors：{{ funValid.errors | json}}
    </p>
    <div>
      <button (click)="test_FormData()">test_FormData</button>
    </div>
    <div>
      <h2>用formData操作文件上传</h2>
      <input type="file" placeholder="files" multiple #files>
      <button (click)="upFile(files)">upFile</button>
    </div>
    <div>
      <h2>ngIf ... else,2秒后变</h2>
      <p *ngIf="shown | async as datas; else hidden">
        {{datas}}
      </p>
      <ng-template #hidden>
        <p style="background: aqua">*ngIf="shown | async as datas; else hidden"</p>
      </ng-template>
      <button (click)="makeChage3()">clickHere</button>
    </div>
  </div>
  <div ngNonBindable>
    <h2>使用 ngNonBindable</h2>
    {{
    <br> 目前 Angular 支持的内建 validators 如下：
    <br> required - 设置表单控件值是非空的。
    <br> email - 设置表单控件值的格式是 email。
    <br> minlength - 设置表单控件值的最小长度。
    <br> maxlength - 设置表单控件值的最大长度。
    <br> pattern - 设置表单控件的值需匹配 pattern 对应的模式。
    <br> 示例：
    <br> this.signupForm = this.fb.group({
    <br> userName: ['', [Validators.required, Validators.minLength(3)]],
    <br> email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+_]+@[a-z0-9.-]+')]]
    <br> });
    <br> }}
  </div>
  <div>
    <h2>array sort</h2>
    <p>原数据：{{datas|json}}</p>
    <p>sort后：{{arr|json}}</p>
    <button (click)="toSort(true)">从小到大</button>
    <button (click)="toSort(false)">从大到小</button>
    <h2>array reduce</h2>
    {{dat}}
    <br>
    <h2>监听当前div元素的wheel事件</h2>
    <p (wheel)="whe($event)" style="width:100%;height:100px;background:peru;">在此元素内滚动鼠标滚轮</p>
    {{wheelData}}
  </div>
  <div>
    <p>图片剪裁框，我自己写的</p>
    <p>vertical-align是相对line-height而定的，向上为正，向下为负</p>
    <div id="box">
      <img id="img1" src="assets/1.jpg">
      <img id="img2" src="assets/1.jpg">
      <div id="main" (mousedown)="mouseDown($event)">
        <div id="dian1" (mousedown)="mouseDown($event)"></div>
        <div id="dian2" (mousedown)="mouseDown($event)"></div>
        <div id="dian3" (mousedown)="mouseDown($event)"></div>
        <div id="dian4" (mousedown)="mouseDown($event)"></div>
        <div id="dian5" (mousedown)="mouseDown($event)"></div>
        <div id="dian6" (mousedown)="mouseDown($event)"></div>
        <div id="dian7" (mousedown)="mouseDown($event)"></div>
        <div id="dian8" (mousedown)="mouseDown($event)"></div>
      </div>
    </div>
  </div>
</div>